﻿<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
    <title>Recipes search</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" href="/static/css/main.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <style>
  .ui-autocomplete-loading {
    background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
  }
  #query { width: 25em; }
  </style>
  <script>
  function log(msg) {
    setTimeout(function() {
        throw new Error(msg);
    }, 0);
  }
  
  $(function() {
    $( "#query" ).autocomplete({
      source: function( request, response ) {
        $.ajax({
          url: "http://suggest.smart-cook.org/suggest",
          dataType: "jsonp",
          data: {
            count: 5,
            query: request.term
          },
          success: function( data ) {
            response( $.map( data.hints, function( item ) {
              return {
                label: item, value: item
              }
            }));
          }
        });
      },
      minLength: 2,
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.label :
          "Nothing selected, input was " + this.value);
      },
      open: function() {
        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
      },
      close: function() {
        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
      }
    });
  });
  </script>
  </head>
  
  <body>
    <div class="bg">
	<div class="wrap" id="container">
      <div class="page_center">
        <div class="page_center_pad">
		  <h1>Поиск рецептов</h1>
          <div class="search_div">
		    <form name="search" method="post" action="/search">
			  <table bgcolor="black" cellpadding="0" cellspacing="1" style="width:70%" align="center">
			  <tr><td>
			  <table bgcolor="white" cellspacing="0" cellpadding="0" class="search_table" style="width:100%">
			    <tbody>
				  <tr>
				    <td width="10px">
					</td>
					<td width="400px">
					  <div class="ui-widget">
					    <input type="text" id="query" name="query" value="{{query}}" style="border: none; font-size:14px; font-family:verdana; outline:none; width:100%" {{autofocus}}>
					  </div>
					<td>
				  </tr>
				</tbody>
			  </table>
			  </td></tr>
			  </table>
			</form>
		  </div>
		  
		  <div align="left">
		    <u>Запрос:</u> <<{{wizard}}>><br><br>
			<u>Найдено рецептов:</u> {{number_found}}<br><br>
		    {% for result in search_response %}
		    <i>Название: </i><b>{{result.0}}</b><br>
			<img src="{{result.2}}"><br>
			{% for ingredient in result.1 %}
			  <i>Ингредиент: </i>{{ingredient}}<br>
			{% endfor %}
			<a href="{{result.3}}">Оригинал рецепта</a>
		    <br>
			<br>
			{% endfor %}
		  </div>
        </div>
      </div>
    </div>
	</div>
  </body>
</html>
